<!--  -->
<template>
  <div class="virtualroot">
    <div class="noticeShowM">
      <p>
        注：上传文件后，可以通过网站地址直接访问此文件。例如上传文件为test.txt，可以通过http://www.35.cn/test.txt访问。<br/>（仅支持{{formatFile}}文件）
      </p>
      <p>
        上传文件若与响站页面同名，则无法生效，单文件大小限制{{allowSize}}内
      </p>
    </div>

    <TipTotal title="虚拟目录">
      <div>
        <Upload :changeDataLoading="changeDataLoading" :resetPageData="resetPageData" :uploadInfos="uploadInfos" :uploadLoading="uploadLoading"/>
      </div>
      <!-- <template slot="total">
        <p class="totalR" v-if="total">文件数：{{total}}</p>
      </template> -->
    </TipTotal>
    <DataTable ref="fileDataTable" :totalPage="totalPage" :loading="pageloading"
      :changeDataLoading="changeDataLoading" :uploadInfos="uploadInfos" :allowSuffix="allowSuffix"/>
    <div style="height: 18px;"></div>
  </div>
</template>

<script>
import TipColla from '@/components/common/TipColla.vue'
import TipTotal from '@/components/common/TipTotal.vue'
import Upload from '@/components/main/user/virtualroot/Upload.vue'
import DataTable from '@/components/main/user/virtualroot/DataTable.vue'
import { mapGetters } from 'vuex'
import storage from '@/core/storage.js'
export default {
  created () {
    let formatFileLocal = storage.getItem('formatFileVitualroot')
    if (formatFileLocal) {
      this.formatFile = formatFileLocal
    }
    this.uploadInfos = []
    // 获取文件可以上传的后缀
    this.$post('/virtual-folder/upload-allow-suffix').then((response) => {
      if (response) {
        // uploadLoading
        this.virtualFolder.ext = response
        this.formatFile = ''
        for (let i in this.virtualFolder.ext) {
          this.formatFile += '.' + this.virtualFolder.ext[i]
          if (parseInt(i) < this.virtualFolder.ext.length - 1) {
            this.formatFile += '、'
          }
        }
        let formatFileLocal = storage.getItem('formatFileVitualroot')
        if (formatFileLocal !== this.formatFile) {
          storage.setItem('formatFileVitualroot', '' + this.formatFile)
        }
      }
      // 获取文件可以上传的文件大小
      this.$post('/virtual-folder/upload-allow-size').then((response) => {
        if (response) {
          // uploadLoading
          let size = response
          this.virtualFolder.valid.size.value = size
          if (size > 1024 * 1024) {
            this.virtualFolder.valid.size.message = '文件上传大小不能超过' + size / (1024 * 1024) * 1.0 + 'M'
            this.allowSize = size / (1024 * 1024) * 1.0 + 'MB'
          } else if (size > 1024) {
            this.virtualFolder.valid.size.message = '文件上传大小不能超过' + size / 1024 * 1.0 + 'KB'
            this.allowSize = size / 1024 * 1.0 + 'KB'
          } else {
            this.virtualFolder.valid.size.message = '文件上传大小不能超过' + size + 'B'
            this.allowSize = size + 'B'
          }
          this.uploadInfos.push(this.virtualFolder)
          this.uploadLoading = false
        }
      })
    })
    // 获取允许修改内容后缀
    this.$post('/virtual-folder/content-allow-suffix').then((response) => {
      if (response) {
        this.allowSuffix = response
      }
    })
  },
  data () {
    return {
      // 文件总数
      total: '',
      // 页面的数据是否加载
      pageloading: true,
      uploadLoading: true,
      // 允许上传的文件限制信息
      uploadInfos: [],
      virtualFolder: {
        ext: [],
        valid: {
          size: {
            message: '文件上传大小不能超过5M',
            value: 5242880
          }
        }
      },
      formatFile: '.txt、.html、.htm、.xml、.css、.js、.xbm、.tif、.pjp、.svgz、.jpg、.jpeg、.ico、.tiff、.gif、.svg、.jfif、.webp、.png、.bmp、.pjpeg、.avif、.eot、.otf、.fon、.font、.ttf、.ttc、.woff、.woff2',
      // 允许修改内容的文件后缀
      allowSuffix: [],
      allowSize: ''
    }
  },
  computed: {
    ...mapGetters([
      'currentSite'
    ])
  },
  components: {
    TipColla,
    TipTotal,
    Upload,
    DataTable
  },
  methods: {
    totalPage (total) {
      if (total) {
        this.total = '' + total
      } else if (parseInt(total) === 0) {
        this.total = '0'
      }
    },
    changeDataLoading (bool) {
      this.pageloading = bool
    },
    // 重置数据
    resetPageData () {
      this.$refs.fileDataTable.resetData()
    }
  }
}

</script>

<style scoped>
.virtualroot /deep/ .el-collapse {
  border-top: 0;
}
.noticeShowM {
  border-left: 4px solid #409EFF;
  padding: 15px;
  font-size: 13px;
  line-height: 1.7;
  background: #F0F8FF;
  margin-bottom: 20px;
}
.totalR {
  float:right;
  margin-right:8px;
  margin-top:6px;
  font-size: 14px;
  color:#666;
}
</style>
